<template>
  <n-card title="试飞报表中心">
    <n-space vertical>
      <n-alert type="info">
        查看试飞任务统计报表和生成分析报告
      </n-alert>
      
      <n-tabs type="line" @update:value="handleTabChange">
        <n-tab-pane name="task" tab="试飞任务统计">
          <n-table :bordered="true" :single-line="false">
            <thead>
              <tr>
                <th>任务编号</th>
                <th>机型</th>
                <th>试飞阶段</th>
                <th>大纲状态</th>
                <th>生成时间</th>
                <th>操作</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(item, i) in taskData" :key="i">
                <td>{{ item.id }}</td>
                <td>{{ item.model }}</td>
                <td>{{ item.phase }}</td>
                <td>
                  <n-tag :type="getStatusType(item.status)">{{ item.status }}</n-tag>
                </td>
                <td>{{ item.generateTime }}</td>
                <td>
                  <n-button size="small" @click="viewDetail(item)">查看</n-button>
                </td>
              </tr>
            </tbody>
          </n-table>
        </n-tab-pane>
        
        <n-tab-pane name="analysis" tab="生成分析">
          <div ref="analysisChartRef" style="height: 400px; width: 100%;"></div>
        </n-tab-pane>
      </n-tabs>
    </n-space>
  </n-card>
</template>

<script setup>
import { ref, onMounted, onUnmounted, nextTick } from 'vue'
import * as echarts from 'echarts'
import { 
  NCard, NSpace, NAlert, NTable, NTag, NButton, NTabs, NTabPane 
} from 'naive-ui'

const analysisChartRef = ref(null)
let analysisChart = null
const currentTab = ref('task')

const taskData = ref([
  { id: 'TF2024001', model: 'C919', phase: '首飞前', status: '已完成', generateTime: '2024-01-15 10:30' },
  { id: 'TF2024002', model: 'ARJ21', phase: '性能测试', status: '生成中', generateTime: '2024-01-15 14:20' },
  { id: 'TF2024003', model: 'C919', phase: '系统测试', status: '待开始', generateTime: '-' },
  { id: 'TF2024004', model: 'MA700', phase: '适航认证', status: '已完成', generateTime: '2024-01-14 16:45' }
])

const getStatusType = (status) => {
  const map = { '已完成': 'success', '生成中': 'warning', '待开始': 'default' }
  return map[status] || 'default'
}

const viewDetail = (item) => {
  console.log('查看详情:', item)
}

// 初始化图表
const initChart = () => {
  if (!analysisChartRef.value) return
  
  // 如果图表已经存在，先销毁
  if (analysisChart) {
    analysisChart.dispose()
    analysisChart = null
  }
  
  analysisChart = echarts.init(analysisChartRef.value)
  analysisChart.setOption({
    tooltip: { trigger: 'axis' },
    legend: { data: ['生成数量', '平均用时'] },
    xAxis: { 
      type: 'category', 
      data: ['1月', '2月', '3月', '4月', '5月', '6月'] 
    },
    yAxis: [
      { type: 'value', name: '生成数量' },
      { type: 'value', name: '平均用时(分钟)' }
    ],
    series: [
      {
        name: '生成数量',
        data: [23, 28, 35, 42, 38, 45],
        type: 'bar',
        color: '#18a058'
      },
      {
        name: '平均用时',
        data: [15, 14, 13, 12, 11, 10],
        type: 'line',
        yAxisIndex: 1,
        color: '#2080f0'
      }
    ]
  })
}

// 标签页切换处理
const handleTabChange = (tabName) => {
  currentTab.value = tabName
  if (tabName === 'analysis') {
    // 等待DOM更新完成后初始化图表
    nextTick(() => {
      setTimeout(initChart, 100) // 添加小延迟确保DOM完全渲染
    })
  }
}

onMounted(() => {
  // 监听窗口大小变化
  window.addEventListener('resize', handleResize)
})

onUnmounted(() => {
  if (analysisChart) {
    analysisChart.dispose()
    analysisChart = null
  }
  window.removeEventListener('resize', handleResize)
})

const handleResize = () => {
  if (analysisChart) {
    analysisChart.resize()
  }
}
</script>